<template>
  <div class="swiperBox">
    <div class="directionIcon">
      <div class="imgLeft" @click="clickLeft" @mouseenter="enter" @mouseleave="leave">
        <img src="../assets/icons/leftact.png" style="margin-top: 40px;margin-left: 10px;" alt="">
      </div>
      <div class="imgRight" @click="clickRight" @mouseenter="enter" @mouseleave="leave">
        <img src="../assets/icons/leftact.png" style="margin-top: 40px;margin-left: 10px;" alt="">
      </div>
    </div>
    <div id="swiper">
      <div class="imgBox">
        <div class="imgDiv" v-for="(item, index) of imgList" :key="index">
          <img class="img1" :src="item" />
          <!-- <div v-for="(item, index) of imgactionList" :key="index" style="font-size:1rem;margin-left:10px">{{ item }}</div> -->
          <div class="whiteaction">
            <div class="fontposition">{{ imgactionList[index] }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    speed: Number,
    direction: String
  },
  data() {
    return {
      imgactionList: [
        "2020年平均降水量产品",
        "2014全国归一化植被指数年均值",
        "2015年全国叶面积指数年均值",
        "2015年全国叶面积指数年均值",
        // "2015全国植被净初级生产力年均值",
        "2000年全国土地利用分布图"
      ],
      imgList: [
        require("../assets/icons/caruseimge/111.png"),
        // require("../assets/icons/caruseimge/222.jpg"),
        require("../assets/icons/caruseimge/333.png"),
        require("../assets/icons/caruseimge/444.png"),
        require("../assets/icons/caruseimge/555.png"),
        require("../assets/icons/caruseimge/666.png")
      ],
      timer: null,
      theSpeed: this.speed,
      imgWidth: 260,
      theDirection: this.direction
    };
  },
  created() {},
  mounted() {
    this.move();
  },
  methods: {
    //   左边
    clickLeft() {

      this.theDirection = "left";

    },
    // 右边
    clickRight() {

      this.theDirection = "right";
    },
    // 移入
    enter() {
      this.timer = clearInterval(this.timer);
    },
    leave() {
      this.move();
    },
    move() {
      var imgBox = document.getElementsByClassName("imgBox")[0];

      imgBox.innerHTML += imgBox.innerHTML;
      var imgDiv = document.getElementsByClassName("imgDiv");

      imgBox.style.width =
      // "8888800px"
      imgDiv.length * this.imgWidth + "px"; //设置ul的宽度使图片可以放下
      let that = this;
      function autoScroll() {

        if (imgBox.offsetLeft < -(imgBox.offsetWidth / 4)) {
          //向左滚动

          imgBox.style.left = 0;
        }
        if (imgBox.offsetLeft > 0) {
          //向右滚动
          imgBox.style.left = -(imgBox.offsetWidth / 4) + "px";
        }
        if (that.theDirection == "left") {
          that.theSpeed = -Math.abs(that.theSpeed);
        } else {
          that.theSpeed = Math.abs(that.theSpeed);
        }
        imgBox.style.left = imgBox.offsetLeft + that.theSpeed + "px";
        // if()
      }
      clearInterval(this.timer);
      this.timer = setInterval(autoScroll, 50); //全局变量 ，保存返回的定时器
    }
  },

  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  }
};
</script>
<style scoped>
.swiperBox {
  height: 110px;
  /* // width: 1156px; */
  width: calc(100% - 80px);
  margin: 13px 62px;
  position: relative;
  top:-15px;
}
.swiperBox .directionIcon {
  position: absolute;
  /* // top: 45%; */
  width: 98%;
  /* left: -11%; */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  opacity: 0.5;
  z-index: 9;
  /* pointer-events: none; */
}

.swiperBox .directionIcon .imgLeft {
  position: absolute;
  left: -46px;
  width: 30px;
  height: 104px;
  top: 3px;
  background-size: 80%;
  background: #dce4ed;
  cursor: pointer;
}

.swiperBox .directionIcon .imgRight {
  position: absolute;
  right: -22px;
  width: 30px;
  height: 104px;
  top: 3px;
  background-size: 80%;
  background: #dce4ed;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  cursor: pointer;
}
.swiperBox #swiper {
  width: 98%;
  height: 110px;
  left: -12px;
  overflow: hidden;
  position: relative;
}
.swiperBox #swiper .imgBox {
  position: absolute;
  left: -23px;
  top: 0;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.swiperBox #swiper .imgBox .imgDiv {
  width: 172px;
  height: 106px;
  margin-left: 20px;
  cursor: pointer;
}
.swiperBox #swiper .imgBox .imgDiv .img1 {
  height: 106px;
  width: 172px;
}
.whiteaction {
  /* // vertical-align: middle; */
  position: absolute;
  /* // text-align:auto; */
  height: 28px;
  font-size: 1rem;
  margin-top: -29px;
  width: 166px;
  margin-left: 4px;
  /* // color:red; */
  background-color: rgba(0, 0, 0, 0.5);
  text-shadow: 1px 1px 1px #000;
}
.fontposition {
  height: 100%;
  margin-left:9px;
  font-size: 12px;
  /* // background: blue; */
  color: #fff;
}

.fontposition::before {
  display: inline-block;
  content: "";
  height: 100%;
  vertical-align: middle;
}


/* 媒体查询1366 */
/* @media (min-width: 1366px) and (max-width: 1600px){
  .swiperBox .directionIcon{
    width: 68%;
}
.swiperBox #swiper{
    width: 68%;
}
  }  */
</style>
